<template>
  <div class="enterxinxi" style="font-size:12px;">
    <div class="box">
      <!-- 方块1 -->
      <div class="box1" v-if="is_perfect==0">
        <div class="box1tit">完善信息</div>
        <div class="box1-right">
          <div class="box1-rightitem1">
            <div class="nicheng">
              <span>*</span> 昵称
            </div>
            <div class="nichengkuang">
              <input type="text" placeholder="请输入不超过10个字" maxlength="10" v-model="nickname" />
              <div>填写你的昵称，让更多的朋友了解和认识你！</div>
            </div>
          </div>
          <div class="box1-rightitem2">
            <div class="chushengriqi">
              <span>*</span> 出生日期
            </div>
            <div class="chushengriqikuang">
              <el-date-picker
                v-model="value1"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"

                :picker-options="pickerOptions0"
              ></el-date-picker>
              <div>填写你的出生日期，发现你身边的同龄人</div>
            </div>
          </div>
          <div class="box1-rightitem3">
            <div class="xingbie">
              <span>*</span> 性别
            </div>
            <div class="xingbiekuang">
              <el-radio v-model="radio" label="1">男</el-radio>
              <el-radio v-model="radio" label="2">女</el-radio>
            </div>
          </div>
        </div>
      </div>
      <!-- 方块2 -->
      <div class="box2" v-if="is_media==0">
        <div class="box2tit">入驻自媒体</div>
        <div class="box2-right">
          <div class="box2-rightitem1">
            <div class="zinicheng">
              <span>*</span> 自媒体昵称
            </div>
            <div class="zinichengkuang">
              <input type="text" placeholder="请输入不超过10个字" maxlength="10" v-model="zinickname" />
              <div>填写你的昵称，让更多的朋友了解和认识你！</div>
            </div>
          </div>
          <div class="box2-rightitem2">
            <div class="qianming">
              <span>*</span> 个人简介
            </div>
            <div class="qianmingkuang">
              <textarea placeholder="请输入不超过30个字" maxlength="30" v-model="qianming"></textarea>
              <div>丰富你的资料，更容易收获更多的关注。</div>
            </div>
          </div>
          <div class="box2-rightitem3">
            <div class="touxiang">
              <span>*</span> 帐号头像
            </div>
            <div class="touxiangkuang">
              <div class="touxiangbox">
                <img v-if="img_temp_url==''" src="../assets/addtouxiang.png" alt />

                <img
                  v-if="img_temp_url!=''"
                  :src="img_temp_url"
                  alt
                  style="width:100%;height:100%;"
                />
                <input class="touxianginput" @change="changeImage" limit="1" type="file" name id />
              </div>
              <div class="zi">要求清晰、健康、代表品牌形象</div>
            </div>
          </div>
          <div class="box2-rightitem4">
            <div class="xingming">
              <span>*</span> 姓名
            </div>
            <div class="xingmingkuang">
              <input type="text" placeholder="请输入不超过4个字" maxlength="4" v-model="xingming" />
              <div>填写你的真实姓名</div>
            </div>
          </div>
          <div class="box2-rightitem5">
            <div class="shenfen">
              <span>*</span> 身份证号
            </div>
            <div class="shenfenkuang">
              <input type="text" placeholder="请输入" v-model="shenfenid" />
              <div>填写你的真实身份证号</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 方块3 -->
      <div class="box3">
        <div class="tijiao shoushou" @click="tijiao">提交</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "enterxinxi",
  data() {
    return {

        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },  
      radio: "1",
      value1: "",
      is_perfect: 0,
      is_media: 0,

      nickname: "",
      zinickname: "",
      qianming: "",
      xingming: "",
      shenfenid: "",
      formtype:"",

      img_temp_url: "",
      file:"",

      biaoqianlist:""
     
    };
  },
  mounted() {
    this.is_perfect = this.$route.params.is_perfect;
    this.is_media = this.$route.params.is_media;

    if(this.is_perfect == 0 && this.is_media == 0){
      this.formtype=1
    }else{
      this.formtype=2
    }

    this.getbiaoqian()
  },
  methods: {
    tijiao() {
      if (this.formtype==1) {
        if (this.nickname == "") {
          this.$message({
            showClose: true,
            message: '昵称不能为空',
            type: "error"
          });
          return
        }
        if (this.value1 == "") {
          this.$message({
            showClose: true,
            message: '请选择出生起日',
            type: "error"
          });
          return
        }
        if (this.radio == "") {
          this.$message({
            showClose: true,
            message: '请选择性别',
            type: "error"
          });
          return
        }
      }

      //  zinickname: "",
      // qianming: "",
      // xingming: "",
      // shenfenid: "",
      if (this.zinickname == "") {
        this.$message({
          showClose: true,
          message: '自媒体昵称不能为空',
          type: "error"
        });
        return
      }
      if (this.qianming == "") {
        this.$message({
          showClose: true,
          message: '签名不能为空',
          type: "error"
        });
        return
      }
      if (this.xingming == "") {
        this.$message({
          showClose: true,
          message: '姓名不能为空',
          type: "error"
        });
        return
      }
      if (this.shenfenid == "") {
        this.$message({
          showClose: true,
          message: '身份证号不能为空',
          type: "error"
        });
        return
      }

      if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.shenfenid) ===false) {
        this.$message({
          showClose: true,
          message: "请输入正确身份证号",
          type: "error"
        });
        return
      }

      var fd=new FormData()

      fd.append("uqid", localStorage.getItem('uqid'));
      fd.append("type", this.formtype);
      fd.append("media_nickname", this.zinickname);
      fd.append("media_avatar", this.file);
      fd.append("media_into", this.qianming);
      fd.append("media_name", this.xingming);
      fd.append("media_identity", this.shenfenid);
      if(this.formtype==1){
        
        fd.append("nickname", this.nickname);
        fd.append("sex", this.radio);
        fd.append("date_birth", this.value1);
      }
      

    

      this.$axios({
        method: "post",
        url: "media/users/info_media_edit",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          this.$router.push({name: "shenhezhong",})
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    changeImage(e) {
      var file = e.srcElement.files[0];
      window.console.log(file);

      // let formData = new FormData();
      // formData.append("type", 1);
      // formData.append("uploadImage", file);

      this.file=file

      var _this = this;
      var reader = new FileReader();
      reader.readAsDataURL(file);
      this.img_temp_url = reader.result;
      reader.onload = function(e) {
        _this.img_temp_url = e.target.result;
      };
    },

    getbiaoqian(){
       this.$get(
        // method: "get",
        "media/users/tag_list",
      
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          //   this.setbiao();
          this.biaoqianlist = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },


  }
};
</script>

<style scoped>
.touxianginput {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.enterxinxi {
  width: 100vw;
  height: 100vh;
  background: url(../assets/yinyingbg.png) no-repeat;
  background-size: 100% 100%;
  padding-left: 194px;
  padding-right: 194px;
  padding-top: 28px;
  padding-bottom: 18px;
  box-sizing: border-box;
}
.box {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 10px;
  overflow: hidden;
  overflow-y: scroll;
}
.box::-webkit-scrollbar {
  display: none;
}
/* 方块1 */
.box1 {
  width: 100%;
  display: flex;
  padding-left: 108px;
  padding-right: 172px;
  box-sizing: border-box;
}
.box1tit {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 88px;
}
.box1-right {
  flex: 1;
  margin-top: 83px;
}
.box1-rightitem1 {
  display: flex;
}
.nicheng {
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34px;
  margin-left: 80px;
}
.nicheng span {
  color: #ff0052;
}
.nichengkuang {
  flex: 1;
}
.nichengkuang > input {
  width: 100%;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(51, 51, 51, 1);
}
input::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 适配火狐 */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ 适配火狐 */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10+  适配ie*/
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
input:focus {
  outline: none;
}
.nichengkuang > div {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  margin-top: 2px;
}
.box1-rightitem2 {
  display: flex;
  margin-top: 32px;
}
.chushengriqi {
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34px;
  margin-left: 52px;
}
.chushengriqi span {
  color: #ff0052;
}
.chushengriqikuang .el-input__inner {
  width: 174px;
  height: 37px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(172, 172, 172, 1);
}
.chushengriqikuang > div {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  margin-top: 1px;
}
.box1-rightitem3 {
  display: flex;
  margin-top: 48px;
}
.xingbie {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34px;
  margin-left: 80px;
}
.xingbie > span {
  color: #ff0052;
}
/* 方块2 */
.box2 {
  width: 100%;
  display: flex;
  padding-left: 91px;
  padding-right: 172px;
  box-sizing: border-box;
}
.box2tit {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 55px;
}
.box2-right {
  flex: 1;
  margin-top: 51px;
}
.box2-rightitem1 {
  display: flex;
}
.zinicheng {
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34px;
  margin-left: 39px;
}
.zinicheng span {
  color: #ff0052;
}
.zinichengkuang {
  flex: 1;
}
.zinichengkuang > input {
  width: 100%;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(51, 51, 51, 1);
}
.zinichengkuang > div {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  margin-top: 2px;
}
.box2-rightitem2 {
  display: flex;
  margin-top: 34px;
}
.qianming {
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34px;
  margin-left: 54px;
}
.qianming span {
  color: #ff0052;
}
.qianmingkuang {
  flex: 1;
}
.qianmingkuang > textarea {
  height: 56px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 6px;
  width: 100%;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(51, 51, 51, 1);
  outline: none;
  resize: none;
  padding: 6px 0;
  box-sizing: border-box;
}
textarea::-webkit-input-placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
textarea:-moz-placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
textarea::-moz-placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
textarea::-ms-input-placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.qianmingkuang > div {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  margin-top: 1px;
}
.box2-rightitem3 {
  display: flex;
  margin-top: 21px;
}
.touxiang {
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34px;
  margin-left: 54px;
}
.touxiang span {
  color: #ff0052;
}
.touxiangbox {
  width: 80px;
  height: 80px;
  position: relative;
  overflow: hidden;
}
.touxiangkuang {
  flex: 1;
}
.touxiangkuang > .zi {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  margin-top: 7px;
}
.box2-rightitem4 {
  display: flex;
  margin-top: 34px;
}
.xingming {
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34px;
  margin-left: 80px;
}
.xingming span {
  color: #ff0052;
}
.xingmingkuang {
  flex: 1;
}
.xingmingkuang > input {
  width: 100%;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(51, 51, 51, 1);
}
.xingmingkuang > div {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  margin-top: 2px;
}
.box2-rightitem5 {
  display: flex;
  margin-top: 34px;
}
.shenfen {
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 34px;
  margin-left: 54px;
}
.shenfen span {
  color: #ff0052;
}
.shenfenkuang {
  flex: 1;
}
.shenfenkuang > input {
  width: 100%;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(51, 51, 51, 1);
}
.shenfenkuang > div {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  margin-top: 2px;
}
/* 方块3 */
.box3 {
  width: 100%;
  padding-left: 91px;
  padding-right: 172px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 30px;
}
.tijiao {
  width: 82px;
  height: 40px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 40px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin-top: 15px;
  margin-right: 51px;
}
</style>
<style>
.el-icon-date:before {
  content: "";
  display: block;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/fans/f4.png);
}
</style>